<template>
  <div class="orderPane">
    <div class="head">比赛类型</div>
    <scrolls></scrolls>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="" name="first">
        <el-table
          :data="tableData"
          style="wmnoth: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="比赛详情描述">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="比赛类型编号"
            prop="mno">
          </el-table-column>
          <el-table-column
            label="比赛类型名称"
            prop="mname">
          </el-table-column>
          <el-table-column
            label="比赛类型概述"
            prop="mdesc">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import scrolls from "./scrolls";

export default {
  components:{
    scrolls
    // order
  },
  name: "matchType",
  data() {
    return {
      activeName:"first",
      tableData: [{
        mno: 'M10001',
        mname: '意甲',
        mdesc: '次级联赛',
        category: '意大利大国自行举办全国性比赛',
      }, {
        mno: 'M10002',
        mname: '德甲',
        mdesc: '低级联赛',
        category: '由于德国足球太过强大',
      }, {
        mno: 'M10003',
        mname: '欧洲杯联赛',
        mdesc: '世界级联赛',
        category: '又欧洲各个国家联合举办',
      }, {
        mno: 'M10004',
        mname: '巴甲',
        mdesc: '低级联赛',
        category: '走在马路上都有人在踢足球',
      }]
    }
  }, methods: {
    handleClick(tab, event) {

    }

  }, created() {
  }

}
</script>

<style scoped lang="stylus">
.head
  font-family "华文琥珀"
  font-size 56px
  margin-top 20px
  margin-bottom 20px
  letter-spacing 40px
.orderPane
  label

  margin-top 20px
.demo-table-expand
  font-size: 0

.demo-table-expand
  label
  wmnoth: 90px
  color: #99a9bf

.demo-table-expand
  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    wmnoth: 50%;


</style>
